<!--
 * @Author: jiangyg email@jiangyg.com
 * @Date: 2022-11-01 21:06:58
 * @LastEditors: jiangyg email@jiangyg.com
 * @LastEditTime: 2022-11-26 16:22:14
 * @FilePath: /frontend/mall-frontend/src/views/login.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <el-container class="container">
    <el-header>
      <router-link :to="{ name: 'index' }">
        <div class="logo">
          <el-image style="width: 134px; height: 42px" src="/images/logo.png" />
          <el-image src="/images/login/welcome.png" />
        </div>
      </router-link>
    </el-header>
    <el-main>
      <div class="background">
        <div class="box">
          <div class="fr login-form">
            <el-card class="box-card">
              <template #header>
                <div class="clearfix">
                  <el-row>
                    <el-col :span="11">
                      <h1 style="color: #ff0000">账号登录</h1>
                    </el-col>
                    <el-col class="title-divider" :span="2">
                      <el-divider direction="vertical"></el-divider>
                    </el-col>
                    <el-col :span="11">
                      <h1>扫码登录</h1>
                    </el-col>
                  </el-row>
                </div>
              </template>
              <el-form :model="dataForm" :rules="dataRule" ref="dataFormRef" @keyup.enter="dataFormSubmit(dataFormRef)" status-icon>
                <el-form-item prop="username">
                  <el-input size="large" :prefix-icon="User" v-model="dataForm.account" placeholder="邮箱/账号/登录手机"></el-input>
                </el-form-item>
                <el-form-item prop="password">
                  <el-input size="large" :prefix-icon="Lock" v-model="dataForm.password" type="password" placeholder="密码"></el-input>
                </el-form-item>
                <el-form-item>
                  <div class="clearfix" style="width: 100%">
                    <el-link type="danger" :underline="false" icon="el-icon-arrow-right" @click="toRegPage"> 立即注册 </el-link>
                    <div class="fr">
                      <el-link type="info" :underline="false" @click="toForgetPasswordPage"> 忘记密码 </el-link>
                    </div>
                  </div>
                </el-form-item>
                <el-form-item>
                  <el-button class="login-btn-submit" type="primary" :disabled="submitted" @click="dataFormSubmit(dataFormRef)"> 登录 </el-button>
                </el-form-item>
              </el-form>
            </el-card>
          </div>
        </div>
      </div>
    </el-main>
    <el-footer height="auto">
      <bottom :divider="false"></bottom>
    </el-footer>
  </el-container>
</template>

<script lang="ts" setup>
import { ref, reactive } from "vue";
import { useRouter } from "vue-router";
import http from "@/utils/httpRequest";
import type { FormInstance } from "element-plus";

import "@/assets/scss/modules/login.scss";
import { User, Lock } from "@element-plus/icons-vue";
import Bottom from "@/views/commons/layout/bottom.vue";

const router = useRouter();

// 表单引用
const dataFormRef = ref<FormInstance>();

// 提交按钮是否禁用
const submitted = ref(false);

// 表单数据
const dataForm = reactive({
  account: "",
  password: "",
  uuid: "",
  captcha: "",
});

// 登录校验规则
const dataRule = {
  account: [{ required: true, message: "帐号不能为空", trigger: "blur" }],
  password: [{ required: true, message: "密码不能为空", trigger: "blur" }],
  captcha: [{ required: true, message: "验证码不能为空", trigger: "blur" }],
};

// 登录事件
const dataFormSubmit = (form: FormInstance | undefined) => {
  if (submitted.value) {
    return;
  }
  form.validate((valid) => {
    if (valid) {
      submitted.value = true;
      http
        .post({
          url: "/auth/login",
          data: dataForm,
        })
        .then(({ data }) => {
          if (http.success(data)) {
            // TODO 此处有BUG
            router.back();
          }
          submitted.value = false;
        });
    }
  });
};

// 跳转注册页面
const toRegPage = () => {
  router.push({
    name: "reg",
  });
};

// 跳转找回密码页面
const toForgetPasswordPage = () => {
  alert("未实现");
};
</script>
